<template>
  <div>
    <el-card class="el-card">
      <el-form
        :model="addForm"
        label-width="80px"
        class="el-form"
        v-show="is_show"
      >
        <div style="margin: 15px; text-align: center">
          <!--头像上传-->
          <el-upload
            action="http://localhost:8088/api/stuInfo/upload"
            :http-request="httpRequestUpload"
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form-item label="姓名" prop="stu_name">
          <el-input v-model="addForm.stuName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="stu_sex">
          <el-form-item label="选择性别" prop="stuSex">
            <el-radio-group v-model="addForm.stuSex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form-item>
        <el-form-item label="学号" prop="stu_num">
          <el-input v-model="addForm.stuNum"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="stu_age">
          <el-input v-model="addForm.stuAge"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="stu_phone">
          <el-input v-model="addForm.stuPhone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="stu_password">
          <el-input v-model="addForm.stuPassword"></el-input>
        </el-form-item>
        <el-form-item label="校区" prop="stu_address">
          <el-select
            v-model="addForm.stuAddress"
            placeholder="请选择所在校区"
            style="width: 216px; height: 42px"
          >
            <el-option label="自贡校区" value="自贡校区"></el-option>
            <el-option label="宜宾校区" value="宜宾校区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="stu_major">
          <el-select
            v-model="addForm.stuMajor"
            placeholder="请选择专业"
            style="width: 216px; height: 42px"
          >
            <el-option label="软件工程" value="软件工程"></el-option>
            <el-option label="网络工程" value="网络工程"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="stu_grade">
          <el-select
            v-model="addForm.stuGrade"
            placeholder="请选择年级"
            style="width: 216px; height: 42px"
          >
            <el-option label="2020" value="2020"></el-option>
            <el-option label="2021" value="2021"></el-option>
            <el-option label="2022" value="2022"></el-option>
            <el-option label="2023" value="2023"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="ok" style="margin-left: 350px"
          >确认修改</el-button
        >
      </el-form>
      <div v-show="!is_show">
        <el-descriptions
          title="个人信息"
          direction="vertical"
          :column="4"
          border
        >
          <el-descriptions-item label="头像" span="4">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          </el-descriptions-item>
          <el-descriptions-item label="姓名">
            {{ $store.state.stuInfo.stuName }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ $store.state.stuInfo.stuSex === 0 ? "女" : "男" }}
          </el-descriptions-item>
          <el-descriptions-item label="学号">
            {{ $store.state.stuInfo.stuNum }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{ $store.state.stuInfo.stuAge }}
          </el-descriptions-item>
          <el-descriptions-item label="电话">
            {{ $store.state.stuInfo.stuPhone }}
          </el-descriptions-item>
          <el-descriptions-item label="密码">
            {{ $store.state.stuInfo.stuPassword }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ $store.state.stuInfo.stuMajor }}
          </el-descriptions-item>
          <el-descriptions-item label="年级">
            {{ $store.state.stuInfo.stuGrade }}
          </el-descriptions-item>
          <el-descriptions-item label="校区">
            {{ $store.state.stuInfo.stuAddress }}
          </el-descriptions-item>
        </el-descriptions>
        <el-button
          type="primary"
          @click="update"
          style="margin-left: 690px; margin-top: 20px"
          >修改信息</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import { UpdateHead } from "@/api/Student/index";
import { fileUpload, findstuInfoById } from "@/api/Student";

export default {
  data() {
    return {
      imageUrl: "",
      dialogVisible: false,
      addForm: {
        adminId:'',
        adminNum:'',
        stuId:'',
        stuNum:'',
        stuName:'',
        stuAge:'',
        stuSex:'',
        stuAddress:'',
        stuMajor:'',
        stuGrade:'',
        stuPhone:'',
        stuPassword:'',
        stuSelfcrisis:'',
        stuHead:'',
      },
      is_show: false,
      user: {},
    };
  },
  mounted() {
    this.imageUrl =
      "data:image/png;base64" + this.$store.state.stuInfo.stuHead;
  },
  methods: {
    httpRequestUpload(v) {
      fileUpload(v.file, this.$store.state.stuInfo.stuId)
        .then((res) => {
          console.log("s:", res.data.message);
          this.imageUrl = "data:image/png;base64" + res.data.message
           this.addForm.stuHead=this.imageUrl
          this.$store.commit("setStuHead", res.data.message);
        })
        .catch((err) => {
          console.log("上传异常");
        });
      // console.log('123', v.file)
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    update() {
      this.imageUrl =
        "data:image/png;base64" + this.$store.state.stuInfo.stuHead;
      this.addForm = this.$store.state.stuInfo;
      this.is_show = true;
  
    },

    async ok() {
      this.addForm.stuId = this.stuId;
      console.log("id", this.stuId);
      console.log("666", this.addForm);
      const{
        adminId,
        adminNum,
        stuId,
        stuNum,
        stuName,
        stuAge,
        stuSex,
        stuAddress,
        stuMajor,
        stuGrade,
        stuPhone,
        stuPassword,
        stuSelfcrisis,
        stuHead
      }=this.addForm
           this.$store.commit('setstuInfo', this.addForm)
          this.is_show=false;
          this.$message.success('更新成功')
       this.imageUrl = this.$store.state.stuInfo.stuHead;
          console.log('img',this.imageUrl)
      const { data: res } = await UpdateHead(
        adminId,
        adminNum,
        stuId,
        stuNum,
        stuName,
        stuAge,
        stuSex,
        stuAddress,
        stuMajor,
        stuGrade,
        stuPhone,
        stuPassword,
        stuSelfcrisis,
        stuHead);
        console.log(res)
      
    },
  },
  computed: {
    stuNum() {
      return this.$store.state.stuInfo.stuNum || [];
    },
    stuName() {
      return this.$store.state.stuInfo.stuName || [];
    },
    stuId() {
      return this.$store.state.stuInfo.stuId || [];
    },
  },
};
</script>

<style scoped>
.el-card {
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: rgba(193, 210, 240, 0.3);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
.el-form {
  padding-right: 20px;
  width: 40%;
  text-align: center;
  margin: auto;
}
</style>
